<template>
  <cardLayout class="microWebchat">
    <template slot="card">
      <webchatCardGroup @getWebchatSessionInfo="getWebchatSessionInfo"></webchatCardGroup>
    </template>
    <template slot="detail">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </template>
  </cardLayout>
</template>
<script lang='ts'>
import { Component, Vue, Watch } from 'vue-property-decorator'
import cardLayout from '@components/cardLayout/index.vue'
import webchatCardGroup from '@/views/webchat/webchatCardGroup.vue'
@Component({
  name: 'webchat',
  components: { cardLayout, webchatCardGroup }
})
export default class Webchat extends Vue {
  private currentRoute: string = ''

  private beforeRouteLeave (to: any, from: any, next: any) {
    this.currentRoute = from.fullPath
    next()
  }

  private beforeRouteEnter (to: any, from: any, next: any) {
    next((vm: any) => {
      if (to.params.id && to.params.id !== '') {
        // 从会话卡片跳出
      } else if (vm.currentRoute) {
        // 点击其他模块回到当前模块离开时的模块 || 刷新系统
        vm.$router.push({ path: '/microWebchat' })
      }
    })
  }

  private getWebchatSessionInfo (res: any) {
    const microStore = (this.$root as any).microStore
    if (microStore) {
      microStore.getWebchatSessionInfo(res)
    }
  }
}
</script>
<style lang="stylus" scoped>
.microWebchat
  height calc(100vh - 90px)
</style>
